<template>
  <div class="attenbox">
    <div v-if="viList.length == 0">
      <van-empty
        image="	https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/暂s无s2x.png"
        description="您还未关注过视频博主哦！"
      />
    </div>
    <div v-else>
      <div class="item" v-for="item in viList" :key="item.vidID">
        <!-- //头像 -->
        <van-cell>
          <template #title>
            <div class="top_l">
              <img class="herad" :src="iconUrl + item.userHeard" alt="" />
              <span style="margin-left: 10px">{{ item.userName }}</span>
            </div>
          </template>
          <template #right-icon>
            <div class="top_r">
              <van-tag class="gz" style="width: 85px" color="#7232dd" plain>{{
                changetime(item.date)
              }}</van-tag>
            </div>
            <van-icon name="arrow-down" class="rows" size="19" />
          </template>
        </van-cell>
        <div>
          <div class="vide" v-if="item.MediaType == '视频'">
            <video autoplay muted controls :src="videoUrl + item.Media"></video>
          </div>

          <div class="vide" v-if="item.MediaType == '图片'">
            <img v-lazy="videoUrl + item.Cover" alt="" />
          </div>
          <!-- <van-swipe
          v-if="item.MediaType == '图片'"
          class="my-swipe"
          indicator-color="rgb(255, 94, 22)"
        >
          <van-swipe-item v-for="img in imgarr" :key="img">
            <img v-lazy="videoUrl + img" alt="" />
          </van-swipe-item>
        </van-swipe> -->
        </div>
        <div class="bottom">
          <van-cell class="bot_tiel" @click="goDetals(item.vidID)">
            <template #title>
              <div class="top_l">
                去看看TA已买到的宝贝
                <van-tag style="margin-left: 4px" type="primary"
                  >TA已买</van-tag
                >
              </div>
            </template>
            <template #right-icon>
              <van-icon
                style="margin-top: 7px; margin-right: -15px"
                name="arrow"
                size="19"
              />
            </template>
          </van-cell>
          <div>
            <p style="padding: 4px 16px">
              {{ item.message }}......<router-link
                class="tomorm"
                :to="{ name: 'videDetail', params: { vid: item.vidID } }"
                >查看更多</router-link
              >
            </p>
            <div
              style="
                padding: 4px 16px;
                display: flex;
                justify-content: space-between;
              "
            >
              <van-tag mark plain type="primary"># 日常穿搭分享</van-tag>
              <van-tag color="#7232dd" plain
                ><van-icon name="location" />#{{ item.type }}</van-tag
              >
            </div>
          </div>
          <van-cell>
            <template #title>
              <van-icon name="share-o" size="24" />
            </template>
            <template #right-icon>
              <div
                style="
                  display: flex;
                  justify-content: space-between;
                  width: 80px;
                "
              >
                <p><van-icon name="like-o" size="24" />6</p>
                <p><van-icon name="chat-o" size="24" />7</p>
              </div>
            </template>
          </van-cell>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import myfun from "../../utils/timeDate.js";
export default {
  data() {
    return {
      video: {
        url: "",

        muted: true,
        loop: false,
        preload: "auto",
        poster: "",
        volume: 1,
        autoplay: true,
      },
      viList: [],
    };
  },
  mounted() {},
  created() {
    this.getPayattentionVideo();
  },
  activated() {
    this.getPayattentionVideo();
  },
  methods: {
    changetime(t) {
      return myfun.dateTime1(t);
    },
    async getPayattentionVideo() {
      try {
         const { data: res } = await this.$http.get("PayattentionVideo", {
        params: { id: this.emailLogin[0].userID },
      });
      res.data.forEach((item) => {
        this.video.url = this.videoUrl + item.Media;
      });
      // console.log(res)
      this.viList = res.data;
      } catch (error) {
        
      }
     
    },
    goDetals(id) {
      this.$router.push({ name: "videDetail", params: { vid: id } });
    },
  },

  computed: {
    ...mapState(["emailLogin"]),
  },
};
</script>
<style lang="less" scoped>
.attenbox {
  background: #fff;
}
.vide {
  // border-radius: 14px;
  color: #fff;
  font-size: 20px;
  height: 420px;
  text-align: center;
  // background-color: #181818;
  video {
    width: 100%;
    height: 100%;
  }
  img {
    width: 100%;
    height: 100%;
  }
}
.my-swipe .van-swipe-item {
  border-radius: 14px;
  color: #fff;
  font-size: 20px;

  text-align: center;
}
.my-swipe img {
  width: 100%;
  height: 100%;
}
.herad {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.top_l {
  display: flex;
  align-items: center;
}
top_r {
  display: flex;
  align-items: center;
}
.gz {
  width: 55px;
  height: 25px;
  text-align: center;
  display: inline-block;
  line-height: 25px;
  padding-left: 9px;
  /* padding-right: 10px; */
  border-radius: 12px;
  margin-right: 7px;
}
.rows {
  margin-top: 4px;
}
.bot_tiel {
  border-bottom: 1px solid #e5e5e5;
  margin-top: -11px;
  height: 3rem;
}
.bottom {
}
.bot_r {
  img {
    margin: 2px;
    width: 30px;
    height: 30px;
    border: 1px solid #f84715;
  }
}
.god {
  .van-card__price {
    color: #fd4713;
  }
}
.tomorm {
  color: #7c7ff7;
}
</style>